<template>
  <el-dialog
    :title="view === 'create'? '新增模块': '编辑模块'"
    :visible="true"
    custom-class="dialogWrapper"
    :before-close="closeDialog">
    <el-form :model="formData" label-width="80px" ref="ruleForm" :rules="rules">
      <el-form-item label="模块名称" prop="moduleName" required>
        <el-input v-model.trim="formData.moduleName" auto-complete="off"></el-input>
      </el-form-item>
      <el-form-item label="模块描述" prop="moduleDesc" required>
        <el-input
          v-model.trim="formData.moduleDesc"
          type="textarea"
          class="textarea"
         auto-complete="off"></el-input>
      </el-form-item>
      <el-form-item label="广告类型" prop="bannerType" required>
        <el-select v-model="formData.bannerType" style="width:120px">
          <el-option label="推荐商品" value="00"></el-option>
          <el-option label="图片广告" value="01"></el-option>
          <el-option label="商品列表" value="02"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="排序" prop="seq" required>
        <el-input v-model.trim="formData.seq" auto-complete="off"></el-input>
      </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button @click="closeDialog">取 消</el-button>
      <el-button type="primary" @click="submit('ruleForm')" :disabled="Subabled">确 定</el-button>
    </div>
  </el-dialog>
</template>

<script>
import { create,edit } from "@/services/module";
import { RequestError } from "@/services/errors";
import { mapActions } from "vuex";
import editorImage from "@/components/Tinymce/components/editorImage";
var serialize = require('form-serialize');
// import {login} from '@/services/login'
// import menuModules from '@/router/modules.json'
export default {
  name: "edit-module",
  data () {
    var validatePass2 = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请选择权限'));
      } else {
        callback();
      }
    }
    return {
      menus: [],
      list: [],
      institutionNo:"",
      formData: {
        moduleName: "",
        moduleDesc: "",
        bannerType: "",
        seq:""
      },
      Subabled:false,
      imgShow:"",
      id:"",
      dialogImageUrl: '',
      dialogVisible: false,
      dialogFormVisible: false,
      menuInfo: [],
      rules: {
        moduleName: [{ required: true, message: "请输入模块名称", trigger: "blur" },
        { min: 1, max: 20, message: '长度在 20个字符以内', trigger: 'blur' }],
        seq: [{ required: true, message: "请输入排序", trigger: "blur" },
        { min: 1, max: 11, message: '长度在 11个字符以内', trigger: 'blur' }],
        moduleDesc: [{ required: true, message: "请输入模块描述", trigger: "blur" }]
      }
    }
  },
  props: {
    view: {
      type: String,
      default: "create"
    }
  },
  methods: {
    ...mapActions(["setUserInfo"]),
    closeDialog() {
      this.$emit("close");
    },
    baseUrl(){
    	return "api/console/institution/addBanner.do";
    },
    imgSrc(data){
      	return this.$store.state.imgUrl + data;
    },
		handleRemove(file, fileList) {
    	console.log(file, fileList);
 	 },
    handleChangeImg(file, fileList){
    	this.imgShow = ""
    	if(fileList.length > 1){
	    		this.$message.warning('当前限制选择 1个文件,多张图片覆盖第一张');
	    		var thisNode = document.getElementsByClassName("el-upload-list__item")[0];
	    		thisNode.parentNode.removeChild(thisNode);
	    	}
    	  var isJPG = ""
    	  if(file.raw.type === 'image/jpeg' || file.raw.type === 'image/png'){
    		  isJPG = true
    	  }else{
    		  isJPG = false
    	  }
        const isLt2M = file.size / 1024 / 1024 < 2;

        if (!isJPG) {
          this.$message.error('上传图片只能是 JPG/png 格式!');
        }
        if (!isLt2M) {
          this.$message.error('上传图片大小不能超过 2MB!');
        }
        return isJPG && isLt2M;
    },
    submit(formName) {
    	this.Subabled = true;
      this.$refs[formName].validate(async valid => {
        if (valid) {
          try {
            if (this.view === "create") {
              await create({
                institutionNo:this.institutionNo,
                moduleName: this.formData.moduleName,
                moduleDesc: this.formData.moduleDesc,
                bannerType: this.formData.bannerType,
                seq: this.formData.seq,
              });
            } else {
              await edit({
                id:this.id,
                institutionNo:this.institutionNo,
                moduleName: this.formData.moduleName,
                moduleDesc: this.formData.moduleDesc,
                bannerType: this.formData.bannerType,
                seq: this.formData.seq,
              });
            }
            this.dialogFormVisible = false;
            this.$emit("close", true);
            this.$message({
              showClose: true,
              message: "提交成功",
              type: "success"
            });
            this.Subabled = false;
          } catch (e) {
            if (e instanceof RequestError) {
              this.$alert(e.message, "提示", {
                type: "error",
                confirmButtonText: "确定"
              });
              this.Subabled = false;
            } else {
              throw e;
            }
          }
        } else {
          return;
        }
      });
    }
  },
  mounted() {},
  components: {
      'editorImage': editorImage
    }
};
</script>
<style>
.dialogWrapper {
  width: 540px;
}
.el-select {
  width: 100%;
}
.editImg{
	  overflow: hidden;
    background-color: #fff;
    border: 1px solid #c0ccda;
    border-radius: 6px;
    box-sizing: border-box;
    width: 148px;
    height: 148px;
    margin: 0 8px 8px 0;
    display: inline-block;
    float: left;
}
.editImg img{
	width: 100%;
	height: 100%;
}
</style>
